import React from 'react';
import useLoadQuestionData from "../../../hooks/useLoadQuestionData";
import style from './index.module.scss'
import EditCanvas from "./EditCanvas";
import {useDispatch} from "react-redux";
import {changeSelectedId} from "../../../redux/componentsReducer";
import LeftPanel from "./LeftPanel";
import RightPanel from "./RightPanel";
import EditHeader from "./EditHeader";

const Edit: React.FC = () => {
  const {loading} = useLoadQuestionData()
  const dispatch = useDispatch()

  function cancleSelected() {
    dispatch(changeSelectedId(''))
  }

  return (
    <div className={style.container}>
      <div style={{background: '#fff', height: '50px'}}>
        <EditHeader/>
      </div>
      <div className={style['content-wrapper']}>
        <div className={style.content}>
          <div className={style.left}>
            <LeftPanel/>
          </div>
          <div className={style.main} onClick={cancleSelected}>
            <div className={style['canvas-wrapper']}>
              <EditCanvas loading={loading}/>
            </div>
          </div>
          <div className={style.right}>
            <RightPanel/>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Edit;
